<template>
    <div>示例演示：</div>
    <el-table :data="testTableArr">
        <el-table-column prop="title" label="title"/>
        <el-table-column prop="content" label="content"/>
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="openDetail(scope.row)">
                详情
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <DragWindow v-for="item in detailInnfoArr" :key="item.id" v-model="item.isShow" :active="activeDialog === item.title" closeShow fullShow @click="clickDialog(item)">
      <template #head>{{ item.title }}</template>
      <div>{{ item.content }}</div>
    </DragWindow>
    <!-- 关闭某些选项 -->
    <!-- <DragWindow
      style="top: 200px; left: 10px"
      v-model="box"
      :resize-able="false"
      drag-able
      closeShow
      fullShow
      width="100px"
      height="100px"
    /> -->
  </template>
  
  <script lang="ts" setup>
  import DragWindow from "./DragWindow.vue"; //因为使用的是 script setup 这里组件会直接注册
  import { onMounted, ref } from "vue";
  
  interface IInfo {
  title: string;
  content: string;
  id: number;
  isShow?: boolean;
}


  const testTableArr = ref<IInfo[]>([]);
  const detailInnfoArr = ref<IInfo[]>([]);
  const activeDialog = ref('');

  const getRandomNum = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
  const getName = (length: number) => {
  const min = 'a'.charCodeAt(0); // 'a'的ASCII码
  const max = 'z'.charCodeAt(0); // 'z'的ASCII码
  let name = '';
  Array.from(Array(length)).map(() => getRandomNum(min, max)).forEach((random:number, i:number) => {
    name += String.fromCharCode(random + i);
  });
  return name;
}
  const getTablleDate = (length: number) => {
    const getNewInfo = (id: number) => {
        const obj = {
            id,
            content: getName(15),
            title: `101011${id%3}`
        };
        return obj;
    }
    const arr = new Array(length).fill('');
    testTableArr.value = arr.map((item: string, i:number) => getNewInfo(i));
  };
  
  const openDetail = (row: IInfo) => {
    const arr:IInfo[] = detailInnfoArr.value.filter((item: IInfo) => item.title !== row.title);
    arr.push({ ...row, isShow: true });
    activeDialog.value = row.title;
    detailInnfoArr.value = arr;
  };

  const clickDialog = (item: IInfo) => activeDialog.value = item.title;

  onMounted(() => {
    getTablleDate(5);
  });
  </script>
